Como hacer para mostrar teclas en un formato amigable dentro de HTML

Pagina referencia mozilla

En html podemos usar la etiqueta <kbd> para representar una tecla visualmente, a mayores necesitamos el siguiente CSS:

kbd {
    background-color: #eee;
    border-radius: 3px;
    border: 1px solid #b4b4b4;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
    color: #333;
    display: inline-block;
    font-size: 1em;
    font-weight: 700;
    line-height: 1;
    padding: 2px 4px;
    white-space: nowrap;
}

Una vez tenemos esto solo tenemos que indicar con la etiqueta <kbd> la tecla que queremos representar de la siguiente manera:

<kbd>Espacio</kbd>

Tambien podemos hacer anidaciones:

<kbd><kbd>Ctrl</kbd> <kbd>Alt</kbd> <kbd>Del</kbd></kbd>

Los ejemplos anteriores se verían así:

Espacio

Ctrl Alt Del

Ejemplo teclas integradas en texto:

Pulsa la tecla Esc para acceder, tecla + para hace zoom y combinación de Ctrl + / para buscar

HTML | key | input

Keys markup